<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            color: #fff;
            text-align: center;
            width: 200px;
        }
        a{
            display: block;
            line-height: 44px;
            background-color: darkmagenta;
            color: #fff;
            cursor: pointer;
        }
        p{
            line-height: 24px;
            background-color:deeppink;
            margin:0
        }
        div{
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <ul>

    </ul>
</body>
<script>
    $(function () {
        // 封装函数获取数据
        function getData() {
            $.ajax({
                url: "js/vertiNav.json",
                success: function (res) {
                    addNode(res.data);
                }
            })
        }

        getData();

        // 添加节点
        function addNode(params) {
            params.forEach(element => {
                console.log(element);
                var li = $(`<li><a>${element.name}</a></li>`);
                $('ul').append(li);
                if (element.family) {
                    // 先添加div，在添加p，不使用ul的原因，该样式，选节点
                    $('li:last').append('<div></div>')
                    element.family.forEach(val => {
                        $('div:last').append((`<p>${val}</p>`));
                    });
                }

            });
        }

        // 点击事件(事件委托)
        // $('li').click(function(){
        //     alert();
        // })
        $('ul').on('click','a',function(){
            $(this).next().slideToggle();
        })


    })
</script>

</html>